<template>
  <div>
    <div>
      <h3 style="text-align: center">登录/注册</h3>
    </div>
    <div style="text-align: center">
      <input type="tel" v-model="tel" placeholder="请输入手机号" />
    </div>

    <div style="text-align: center; margin-top: 20px">
      <input
        type="text"
        v-model="yzm"
        placeholder="请输入验证码"
        style="width: 45%"
      />
      <span
        :class="{ disabled: isDisabled }"
        :disabled="isDisabled"
        type="button"
        @click="hqyzm"
        style="
          display: inline-block;
          width: 35%;

          border: 0px;
        "
        >{{ buttonText }}</span
      >
    </div>
    <div style="text-align: center; margin-top: 20px">
      <button
        @click="login"
        style="margin-top: 20px; background-color: #ffff; border: 0px"
      >
        登录
      </button>
    </div>
    <div
      @click="router.push('/login/zh')"
      style="
        text-align: center;
        margin-top: 10px;
        font-size: small;
        color: darkgrey;
      "
    >
      账号登录
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import axios, { fetchData } from "../../utils/request";
import { useRouter } from "vue-router";

const router = useRouter();

const countdown = ref(60);
const isDisabled = ref(false);
const buttonText = ref("获取验证码");

let tel = ref("");
let yzm = ref("");
let yzm1 = ref("");

const login = async () => {
  if (tel.value) {
    let data = await axios.post("/addlist", {
      tel: tel.value,
    });
    router.push("/trends");
  }
};

const hqyzm = async () => {
  if (isDisabled.value) return;
  isDisabled.value = true;
  buttonText.value = `${countdown.value}s`;
  const timer = setInterval(() => {
    countdown.value -= 1;
    buttonText.value = `${countdown.value}s`;

    if (countdown.value === 0) {
      clearInterval(timer);
      isDisabled.value = false;
      countdown.value = 60;
      buttonText.value = "获取验证码";
    }
  }, 1000);

  let data = await axios.get("/yzm", {
    skipRetry: true,
    params: {
      tel: tel.value,
    },
  });
  console.log(data);
  yzm1.value = data.data.len;
  console.log(yzm1.value);
};

</script>

<style lang="scss" scoped></style>
